<template>
  <div class="roleTable">
    <div class="roleTable">
      <el-table
        ref="roleTable"
        :data="roleData"
        highlight-current-row
        border
        tooltip-effect="dark"
        style="width: 100%; height: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="40"
        />
        <el-table-column
          align="center"
          prop="num"
          label="序号"
          width="85"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="角色"
          width="120"
        />
        <el-table-column
          align="center"
          prop="code"
          label="角色编号"
          width="120"
        />
        <el-table-column
          align="center"
          prop="remark"
          label="角色备注"
          width="120"
        />
        <el-table-column
          align="center"
          prop="companyDTO.name"
          label="所属公司"
          width="120"
        />
        <el-table-column
          align="center"
          prop="organizationDTO.name"
          label="所属机构"
          width="120"
        />
        <el-table-column
          align="center"
          prop="ing"
          label="启用"
          width="120"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === 1 ? 'success' : 'primary'"
              disable-transitions
            >{{ scope.row.status === 1 ? '启用' : '停用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          min-width="300"
        >
          <template slot-scope="scope">
            <el-button
              class="elBtn"
              size="mini"
              type="primary"
              @click="Copy(scope.row)"
            >复制</el-button>
            <el-button
              class="elBtn"
              size="mini"
              @click="Edit(scope.row)"
            >编辑</el-button>
            <el-button
              class="elBtn"
              size="mini"
              type="danger"
              @click="Delete(scope.row)"
            >删除</el-button>
            <el-button
              class="elBtn"
              size="mini"
              type="warning"
              @click="Look(scope.row)"
            >查看权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: 'RoleTable',
  props: {
    roleData: Array, // 表格数据
    rolePage: Object, // 页码数据
    selection: Function, // 选择函数
    roleCopy: Function, // 复制函数
    roleEdit: Function, // 编辑函数
    delete: Function, // 删除函数
    roleLook: Function // 查看权限函数
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  methods: {
    // 选择行数
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.selection(this.multipleSelection)
    },
    // 复制
    Copy(row) {
      this.roleCopy(row)
    },
    // 编辑
    Edit(row) {
      this.roleEdit(row)
    },
    // 删除
    Delete(row) {
      this.delete(row)
    },
    // 查看权限
    Look(row) {
      this.roleLook(row)
    }
  }
}
</script>
